<template>
  <span>
    <button @click="sub(index)">-</button>
    <!-- <span>{{num}}</span> -->
    <input type="text" v-model="countNum" v-on:input="changeVal" />
    <button @click="add(index)">+</button>
  </span>
</template>
<script>
export default {
  props: ["num", "index"],
  data() {
    return {
      countNum: this.num,
    };
  },
  methods: {
    add(i) {
      this.countNum++;
      this.$emit("add", i, this.countNum);
    },
    sub(i) {
      this.countNum--;
      this.$emit("sub", i, this.countNum);
    },
    changeVal() {
      this.$emit("changeNum", this.index, this.countNum);
    },
  },
  watch: {
    num() {
      if (this.num === 0) {
        this.countNum = 0;
      }
    },
  },
};
</script>
